<template>
  <div>
    <div class="main-class">
      <div class="big-font">选择分类</div>
      <div class="main-box">
        <el-row>
          <el-col :span="3">
            <el-button class="main-all-btn">全部</el-button>
          </el-col>
          <el-col :span="21">
            <el-row>
              <el-col :span="3" v-for="(item,index) in mainClass" :key="index" class="main-item-box">
                <el-button type="text" class="main-item-btn">{{item.name}}</el-button>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="detail-class">
      <div class="detail-box">
        <el-row>
          <el-col :span="3">
            <el-button class="main-all-btn">全部</el-button>
          </el-col>
          <el-col :span="21">
            <el-row>
              <el-col :span="3" v-for="(item,index) in detailClass" :key="index" class="main-item-box" :class="[(index+1)%7==0?'right-item':'']">
                <el-button type="text" class="main-item-btn">{{item.name}}</el-button>
              </el-col>
            </el-row>
            <el-row v-if="!moreFlag">
              <el-col :span="3" v-for="(item,index) in detailClass" :key="item.id" class="main-item-box" :class="[(index+1)%7==0?'right-item':'']">
                <el-button type="text" class="main-item-btn">{{item.name}}</el-button>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="more-class" @click="moreDetailClass">
      <i class="el-icon-arrow-down" v-if="moreFlag"></i>
      <i class="el-icon-arrow-up" v-else></i>
    </div>
    <div class="price-class">
      <div class="big-font">技术预算</div>
      <div class="main-box">
        <el-row>
          <el-col :span="3">
            <el-button class="main-all-btn">全部</el-button>
          </el-col>
          <el-col :span="21">
            <el-row>
              <el-col :span="3" v-for="(item,index) in priceClass" :key="index" class="main-item-box">
                <el-button type="text" class="main-item-btn">{{item.name}}</el-button>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DemandClassification",
  data() {
    return {
      moreFlag:true,
      mainClass:[
        {
          name:'智能',
          id:96321
        },
        {
          name:'安防',
          id:96322
        },
        {
          name:'通讯',
          id:96323
        },
        {
          name:'医疗',
          id:96324
        },
        {
          name:'芯片',
          id:96325
        },
        {
          name:'养老',
          id:96326
        }
      ],
      detailClass:[
        {
          name:'化工化石',
          pClassId:96326,
          id:79854
        },
        {
          name:'化学原料',
          pClassId:96326,
          id:79854
        },
        {
          name:'通讯运营',
          pClassId:96326,
          id:79854
        },
        {
          name:'通讯设备',
          pClassId:96326,
          id:79854
        },
        {
          name:'医药商业',
          pClassId:96326,
          id:79854
        },
        {
          name:'医药机械',
          pClassId:96326,
          id:79854
        },
        {
          name:'医疗服务',
          pClassId:96326,
          id:79854
        },
        {
          name:'化工化石',
          pClassId:96326,
          id:79854
        },
        {
          name:'化学原料',
          pClassId:96326,
          id:79854
        },
        {
          name:'通讯运营',
          pClassId:96326,
          id:79854
        },
        {
          name:'通讯设备',
          pClassId:96326,
          id:79854
        },
        {
          name:'医药商业',
          pClassId:96326,
          id:79854
        },
        {
          name:'医药机械',
          pClassId:96326,
          id:79854
        },
        {
          name:'医疗服务',
          pClassId:96326,
          id:79854
        },
      ],
      priceClass:[
        {
          name:'面议',
          id:96321
        },
        {
            name:'1-10万',
          id:96322
        },
        {
          name:'10-20万',
          id:96323
        },
        {
          name:'20-100万',
          id:96324
        },
        {
          name:'100-500万',
          id:96325
        },
        {
          name:'500-1000万',
          id:96326
        },
        {
          name:'1000万以上',
          id:96327
        }
      ],
    }
  },
  methods:{
    moreDetailClass() {
      this.moreFlag = !this.moreFlag;
    }
  }
}
</script>

<style scoped>
.main-class {
  background-color: #1C365F;
  color: #FFFFFF;
  padding: 20px;
  margin-top: 30px;
}
.big-font {
  font-size: 20px;
}
.main-box {
  margin-top: 20px;
}
.main-all-btn {
  background-color: #0F223B;
  color: #FFFFFF;
  border: none;
  border-radius: 0;
  font-size: 16px;
  width: 80%;
}
.main-item-box {
  text-align: center;
}
.main-item-btn {
  color: #FFFFFF;
  font-size: 16px;
}
.detail-class {
  background-color: #2954A2;
  color: #FFFFFF;
  padding: 20px;
}
.right-item {
  margin-right: 20px;
}
.more-class {
  background-color: #1C365F;
  color: #FFFFFF;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}
.price-class {
  background-color: #2954A2;
  color: #FFFFFF;
  padding: 20px;
}

</style>